<template>
<div class="account-security-container">
    <div class="account-security-header">
        <van-nav-bar title="账号安全" left-arrow @click-left="$router.go(-1)" />
    </div>

    <div class="account-security-content">
        <div class="security-level">
            <div class="level-title">
                <span>账号安全评分</span>
                <span class="level-score">{{ securityScore }}分</span>
            </div>
            <van-progress :percentage="securityScore" :show-pivot="false" color="#07c160" />
            <div class="level-desc">{{ securityLevelDesc }}</div>
        </div>

        <van-cell-group inset class="security-items">
            <van-cell title="登录密码" is-link @click="goToPage('change-password')">
                <template #right-icon>
                    <div class="security-status">
                        <van-tag type="success" v-if="securityInfo.hasPassword">已设置</van-tag>
                        <van-tag plain type="danger" v-else>未设置</van-tag>
                    </div>
                </template>
            </van-cell>

            <van-cell title="手机号" is-link @click="goToPage('bind-phone')">
                <template #right-icon>
                    <div class="security-status">
                        <template v-if="securityInfo.phone">
                            <span class="phone-number">{{ maskPhone(securityInfo.phone) }}</span>
                            <van-tag type="success">已绑定</van-tag>
                        </template>
                        <van-tag plain type="danger" v-else>未绑定</van-tag>
                    </div>
                </template>
            </van-cell>

            <van-cell title="邮箱" is-link @click="goToPage('bind-email')">
                <template #right-icon>
                    <div class="security-status">
                        <template v-if="securityInfo.email">
                            <span class="email-address">{{ maskEmail(securityInfo.email) }}</span>
                            <van-tag type="success">已绑定</van-tag>
                        </template>
                        <van-tag plain type="danger" v-else>未绑定</van-tag>
                    </div>
                </template>
            </van-cell>

            <van-cell title="微信" is-link @click="goToPage('bind-wechat')">
                <template #right-icon>
                    <div class="security-status">
                        <van-tag type="success" v-if="securityInfo.wechat">已绑定</van-tag>
                        <van-tag plain type="danger" v-else>未绑定</van-tag>
                    </div>
                </template>
            </van-cell>

            <van-cell title="QQ" is-link @click="goToPage('bind-qq')">
                <template #right-icon>
                    <div class="security-status">
                        <van-tag type="success" v-if="securityInfo.qq">已绑定</van-tag>
                        <van-tag plain type="danger" v-else>未绑定</van-tag>
                    </div>
                </template>
            </van-cell>
        </van-cell-group>

        <van-cell-group inset class="security-items">
            <van-cell title="登录设备管理" is-link @click="goToPage('device-management')">
                <template #right-icon>
                    <span class="device-count">{{ securityInfo.deviceCount }}台设备</span>
                </template>
            </van-cell>

            <van-cell title="登录记录" is-link @click="goToPage('login-history')" />
        </van-cell-group>

        <van-cell-group inset class="security-items">
            <van-cell title="两步验证" center>
                <template #right-icon>
                    <van-switch v-model="securityInfo.twoFactorAuth" size="24" @change="toggleTwoFactorAuth" />
                </template>
            </van-cell>

            <van-cell title="指纹/面容解锁" center>
                <template #right-icon>
                    <van-switch v-model="securityInfo.biometricAuth" size="24" @change="toggleBiometricAuth" />
                </template>
            </van-cell>
        </van-cell-group>
    </div>
</div>
</template>

<script>
export default {
    name: 'AccountSecurityPage',
    data() {
        return {
            securityInfo: {
                hasPassword: true,
                phone: '13812345678',
                email: 'example@mail.com',
                wechat: true,
                qq: false,
                deviceCount: 2,
                twoFactorAuth: false,
                biometricAuth: true
            }
        }
    },
    computed: {
        securityScore() {
            // 计算安全评分
            let score = 0

            if (this.securityInfo.hasPassword) score += 20
            if (this.securityInfo.phone) score += 20
            if (this.securityInfo.email) score += 20
            if (this.securityInfo.wechat || this.securityInfo.qq) score += 20
            if (this.securityInfo.twoFactorAuth) score += 20

            return score
        },

        securityLevelDesc() {
            // 根据评分返回安全级别描述
            if (this.securityScore >= 80) {
                return '您的账号安全级别较高'
            } else if (this.securityScore >= 60) {
                return '您的账号安全级别中等'
            } else {
                return '建议您完善安全设置，提高账号安全性'
            }
        }
    },
    methods: {
        maskPhone(phone) {
            // 手机号码脱敏显示
            if (!phone) return ''
            return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
        },

        maskEmail(email) {
            // 邮箱脱敏显示
            if (!email) return ''
            const parts = email.split('@')
            if (parts.length !== 2) return email

            let name = parts[0]
            const domain = parts[1]

            if (name.length <= 2) {
                name = name.charAt(0) + '*'
            } else {
                name = name.charAt(0) + '***' + name.charAt(name.length - 1)
            }

            return name + '@' + domain
        },

        goToPage(page) {
            // 根据不同的页面进行路由跳转
            switch (page) {
                case 'change-password':
                    this.$router.push('/change-password')
                    break
                case 'bind-phone':
                    this.$router.push('/bind-phone')
                    break
                case 'bind-email':
                    this.$router.push('/bind-email')
                    break
                case 'bind-wechat':
                    this.$router.push('/bind-wechat')
                    break
                case 'bind-qq':
                    this.$router.push('/bind-qq')
                    break
                case 'device-management':
                    this.$router.push('/device-management')
                    break
                case 'login-history':
                    this.$router.push('/login-history')
                    break
                default:
                    this.$toast('页面开发中')
            }
        },

        toggleTwoFactorAuth(value) {
            if (value) {
                this.$dialog.confirm({
                    title: '开启两步验证',
                    message: '开启两步验证后，登录时将需要额外的验证码，这将大大提高您的账号安全性。是否继续？',
                }).then(() => {
                    this.$toast.success('两步验证已开启')
                }).catch(() => {
                    this.securityInfo.twoFactorAuth = false
                })
            } else {
                this.$dialog.confirm({
                    title: '关闭两步验证',
                    message: '关闭两步验证后，登录时将不再需要额外的验证码，这可能会降低您的账号安全性。是否继续？',
                }).then(() => {
                    this.$toast('两步验证已关闭')
                }).catch(() => {
                    this.securityInfo.twoFactorAuth = true
                })
            }
        },

        toggleBiometricAuth(value) {
            if (value) {
                this.$toast.success('指纹/面容解锁已开启')
            } else {
                this.$toast('指纹/面容解锁已关闭')
            }
        }
    }
}
</script>

<style scoped>
.account-security-container {
    min-height: 100vh;
    background-color: #f7f8fa;
}

.account-security-content {
    padding: 16px;
}

.security-level {
    background-color: #fff;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}

.level-title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.level-score {
    color: #07c160;
    font-weight: 500;
}

.level-desc {
    margin-top: 10px;
    font-size: 12px;
    color: #969799;
}

.security-items {
    margin-bottom: 16px;
}

.security-status {
    display: flex;
    align-items: center;
}

.phone-number,
.email-address {
    margin-right: 8px;
    font-size: 14px;
    color: #969799;
}

.device-count {
    font-size: 14px;
    color: #969799;
}
</style>